/* eslint-disable no-underscore-dangle */
<template>
  <div class="container">
    <!-- header start -->
    <!-- <div class="container_header">
      <p>综合态势分析</p>
    </div> -->
    <!-- header end -->
    <!-- view start -->
    <div class="visual">
      <div class="visual_left">
        <div class="visual_box">
          <div class="visual_title">
            <span>国力排行</span>
            <img src="../../../globle/image/login/ksh33.png" />
          </div>
          <div class="visual_chart">
              <component :is="nameOne"></component>
          </div>
        </div>
        <div class="visual_box">
          <div class="visual_title">
            <span>GDP排行</span>
            <img class="visual_img" src="../../../globle/image/login/ksh33.png" />
            <div class="select_year">
            <el-select
              v-model="nowOneyear"
              placeholder="请选择"
              size="mini"
              @change="changeYear('two',nowOneyear)"
            >
              <el-option
                v-for="item in yearlyTwo"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
            </div>

          </div>
          <div class="visual_chart">
              <component ref="twoCharts" :is="nameTwo" @changeNum="changeNum"></component>
          </div>
        </div>
        <div class="visual_box">
          <div class="visual_title">
            <span>粮食生产</span>
            <!-- <span>各军种人数</span> -->
            <img class="visual_img" src="../../../globle/image/login/ksh33.png" />
            <div class="select_year">
                <el-select
              v-model="nowFouryear"
              placeholder="请选择"
              size="mini"
              @change="changeYear('four',nowFouryear)"
            >
              <el-option
                v-for="item in yearlyFour"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
          </div>
          <div class="visual_chart">
              <component ref="fourCharts" :is="nameFour" @changeNum="changeNum"></component>
            <!-- <el-tabs v-model="activeName" type="card">
                            <el-tab-pane label="空军" name="first">
                            </el-tab-pane>
                            <el-tab-pane label="陆军" name="second"></el-tab-pane>
                            <el-tab-pane label="海军" name="third"></el-tab-pane>
                        </el-tabs> -->
            <!-- <a>空军</a>
                        <a>陆军</a>
                        <a>海军</a> -->
            <!-- <div class="sfzcll_pos_box">
                            <div class="sfzcll_box">
                                <img class="sfzcll_bkJk" src="../../../globle/image/login/ksh34.png">
                                <img class="sfzcll_bkJk" src="../../../globle/image/login/ksh34.png">
                                <img class="sfzcll_bkJk" src="../../../globle/image/login/ksh34.png">
                                <img class="sfzcll_bkJk" src="../../../globle/image/login/ksh34.png">
                                <label><img src="../../../globle/image/login/ksh35.png">公路运输</label>
                                <div class="sfzcll_smallBk">
                                    <div class="ygl">
                                        <span>4347.2万</span>人
                                    </div>
                                </div>
                                <div class="sfzcll_smallBk">
                                    <div class="ygh">
                                        <span>4347.2万</span>人
                                    </div>
                                </div>
                                <div class="clear"></div>
                            </div>
                            <div class="sfzcll_box">
                                <img class="sfzcll_bkJk" src="../../../globle/image/login/ksh34.png">
                                <img class="sfzcll_bkJk" src="../../../globle/image/login/ksh34.png">
                                <img class="sfzcll_bkJk" src="../../../globle/image/login/ksh34.png">
                                <img class="sfzcll_bkJk" src="../../../globle/image/login/ksh34.png">
                                <label><img src="../../../globle/image/login/ksh35.png">公路运输</label>
                                <div class="sfzcll_smallBk">
                                    <div class="ygl">
                                        <span>4347.2万</span>人
                                    </div>
                                </div>
                                <div class="sfzcll_smallBk">
                                    <div class="ygh">
                                        <span>4347.2万</span>人
                                    </div>
                                </div>
                                <div class="clear"></div>
                            </div>
                            <div class="sfzcll_box">
                                <img class="sfzcll_bkJk" src="../../../globle/image/login/ksh34.png">
                                <img class="sfzcll_bkJk" src="../../../globle/image/login/ksh34.png">
                                <img class="sfzcll_bkJk" src="../../../globle/image/login/ksh34.png">
                                <img class="sfzcll_bkJk" src="../../../globle/image/login/ksh34.png">
                                <label><img src="../../../globle/image/login/ksh35.png">公路运输</label>
                                <div class="sfzcll_smallBk">
                                    <div class="ygl">
                                        <span>4347.2万</span>人
                                    </div>
                                </div>
                                <div class="sfzcll_smallBk">
                                    <div class="ygh">
                                        <span>4347.2万</span>人
                                    </div>
                                </div>
                                <div class="clear"></div>
                            </div>
                        </div> -->
          </div>
        </div>
      </div>
      <div class="visual_content">
        <div class="visual_conTop">
          <!-- <el-button type="primary" icon="el-icon-s-tools">管理图标</el-button> -->
          <div class="visual_conTop_box visual_conTop1">
            <div>
              <h3>当前国家</h3>
              <div class="currentCountry" @click="currentCountry">
                <div class="currentCountry_content">
                  <div class="currentCountry_content_true">
                    <span>{{ nowCountry.value }}</span>
                    <div>
                      <i
                        class="el-icon-caret-bottom"
                        :class="isOpen ? 'reversDirection' : ''"
                      ></i>
                    </div>
                  </div>
                  <el-select
                    v-model="nowCountry.id"
                    placeholder="请选择国家"
                    style="
                      width: 150px;
                      position: absolute;
                      left: 0;
                      top: 0;
                      z-index: 3;
                      opacity: 0;
                    "
                    @change="bindchangeCountry"
                  >
                    <el-option
                      v-for="item in cities"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    >
                      <span style="float: left">{{ item.name }}</span>
                      <span style="float: right">
                        <svg
                          :id="item.id"
                          class="icon"
                          aria-hidden="true"
                          style="cursor: pointer"
                        >
                          <use :xlink:href="'#' + item.iconName"></use>
                        </svg>
                      </span>
                    </el-option>
                  </el-select>
                </div>
              </div>
              <div class="conTop_img">
                <svg class="icon" aria-hidden="true" style="cursor: pointer">
                  <use :xlink:href="'#' + nowCountry.iconName"></use>
                </svg>
              </div>
            </div>
          </div>
          <div class="visual_conTop_box visual_conTop1">
            <div>
              <h3>数据总量</h3>
              <p>{{ areaAcount.dot + areaAcount.relate }}</p>
              <div class="conTop_img"></div>
            </div>
          </div>
          <div class="visual_conTop_box visual_conTop2">
            <div>
              <h3>国家数据</h3>
              <p
                :title="
                  bottomModeMapView.nodeNum +
                  bottomModeMapView.lineNum +
                  '(点:' +
                  bottomModeMapView.nodeNum +
                  ' ' +
                  '线:' +
                  bottomModeMapView.lineNum +
                  ')'
                "
              >
                {{ bottomModeMapView.nodeNum + bottomModeMapView.lineNum }}
              </p>
              <div class="conTop_img" @click="showBasePopUp">
                <i class="el-icon-add-location" title="管理基地"></i>
              </div>
            </div>
          </div>
          <div class="visual_conTop_box visual_conTop2">
            <div>
              <h3>图标管理</h3>
              <p :title="iconCount">{{ iconCount }}</p>
              <div class="conTop_img" @click="showIconPopUp">
                <i class="el-icon-menu" title="管理基地"></i>
              </div>
            </div>
          </div>
          <div class="clear"></div>
        </div>
        <div class="visual_conBot">
          <img
            class="visual_conBot_l"
            src="../../../globle/image/login/ksh42.png"
          />
          <img
            class="visual_conBot_2"
            src="../../../globle/image/login/ksh43.png"
          />
          <img
            class="visual_conBot_3"
            src="../../../globle/image/login/ksh44.png"
          />
          <img
            class="visual_conBot_4"
            src="../../../globle/image/login/ksh45.png"
          />
          <!-- <div class="visual_chart_text">
                        <h1>战略点</h1>
                    </div> -->
          <!-- <div class="visual_chart" id="map"></div> -->
          <Map ref="mapCom" />
          <!-- <div class="visual_conBot_bot">
                        <div class="visualSssf_left">
                            <h3>今日实时收费</h3>
                            <a style="display:block">全省数据</a>
                            <a>大同北</a>
                            <a>大同南</a>
                            <a>朔州</a>
                            <a>吕梁北</a>
                            <a>吕梁南</a>
                            <a>太原</a>
                            <a class="active">晋中</a>
                            <a>太旧</a>
                            <a>长治</a>
                        </div>
                        <div class="visualSssf_right">
                            <div class="visualSssf_right_box" id="main5"></div>
                            <div class="visualSssf_right_box" id="main6"></div>
                            <div class="visualSssf_right_box" id="main7"></div>
                        </div>
                        <div class="clear"></div>
                    </div> -->
        </div>
      </div>
      <div class="visual_right">
        <div class="visual_box">
          <div class="visual_title">
            <span>能源消耗</span>
            <img class="visual_img" src="../../../globle/image/login/ksh33.png" />
            <div class="select_year">
            <el-select
              v-model="nowThreeyear"
              placeholder="请选择"
              size="mini"
              @change="changeYear('three',nowThreeyear)"
            >
              <el-option
                v-for="item in yearlyThree"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
          </div>
          <div class="visual_chart" id="main3">
              <component ref="threeCharts" :is="nameThree" @changeNum="changeNum"></component>
          </div>
        </div>
        <div class="visual_box">
          <div class="visual_title">
            <span>后勤能力</span>
            <!-- <span>粮食生产</span> -->
            <img class="visual_img" src="../../../globle/image/login/ksh33.png" />
            <div class="select_year" v-if="nameFive!='fiveChartAS'">
            <el-select
              v-model="nowFiveyear"
              placeholder="请选择"
              size="mini"
              @change="changeYear('five',nowFiveyear)"
            >
              <el-option
                v-for="item in yearlyFive"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
          </div>
          <div class="visual_chart">
              <component ref="fiveCharts" :is="nameFive" @changeNum="changeNum"></component>
          </div>
        </div>
        <div class="visual_box">
          <div class="visual_title">
            <span>国防开支</span>
                 <img class="visual_img" src="../../../globle/image/login/ksh33.png" />
            <div class="select_year">
               <el-select
              v-model="nowSixyear"
              placeholder="请选择"
              size="mini"
              @change="changeYear('six',nowSixyear)"
            >
              <el-option
                v-for="item in yearlySix"
                :key="item"
                :label="item"
                :value="item"
              >
              </el-option>
            </el-select>
          </div>
          </div>
          <div class="visual_chart">
              <component  ref="sixCharts" :is="nameSix" @changeNum="changeNum"></component>
          </div>
        </div>
      </div>
    </div>
    <!-- 基地管理弹框 start -->
    <basement
      v-show="bottomModeMapView.IsShow"
      @chooseMap="chooseMap"
      @loadingFile="loadingFile"
      @changeModel="changeModel"
    ></basement>
    <!-- 基地管理弹框 end -->
    <!-- 图标管理弹框 start -->
    <IconfontPop
      v-if="bottomModeMapView.IsIconShow"
      @chooseMap="chooseMap"
    ></IconfontPop>
    <!-- 图标管理弹框 end -->
    <!-- view end -->
  </div>
</template>

<script>
import $ from 'jquery';
import "./../../../globle/js/flyLine/flyLine";
import {
  mapGetters,
  mapMutations
} from "vuex";
import Map from './components/map.vue'
import basement from './components/basement.vue'
import IconfontPop from './components/IconfontPop.vue'
import oneChart from './chartsCommon/one.vue'
import oneChartAS from './chartsAssCom/one.vue'
import twoChart from './chartsCommon/two.vue'
import twoChartAS from './chartsAssCom/two.vue'
import threeChart from './chartsCommon/three.vue'
import threeChartAS from './chartsAssCom/three.vue'
import fiveChart from './chartsCommon/five.vue'
import fiveChartAS from './chartsAssCom/five.vue'
import sixChart from './chartsCommon/six.vue'
import sixChartAS from './chartsAssCom/six.vue'
import fourChart from './chartsCommon/four.vue'
import fourChartAS from './chartsAssCom/four.vue'

export default {
  components: {
    Map,
    basement,
    IconfontPop,
    oneChart,
    twoChart,
    threeChart,
    fiveChart,
    sixChart,
    fourChart,
    oneChartAS,
    twoChartAS,
    fourChartAS,
    sixChartAS,
    fiveChartAS,
    threeChartAS,
  },
  data() {
    return {
      cities: [],
      nowCountry: {
        id: '',
        value: '请选择国家',
        iconName: '',
      }, //当前国家
      isOpen: false,
      iconCount: 0, //图标数值
      areaAcount: {
        dot: 0,
        relate: 0,
      }, //数据总量
      activeName: "first",
      fullscreen: false,//全屏设置
      nameOne:'',//第一图表
      nameTwo:'',
      nameThree:'',//第三图表
      nameFour:'',//第四图表
      nameFive:'',//第五图表
      nameSix:'',//第四图表
      yearlyTwo: [],//第二步年数组
      nowOneyear: '',//第二步当前年
      yearlyThree: [],//第三步年数组
      nowThreeyear: '',
      yearlyFive: [],//第五步年数组
      nowFiveyear: '',
      yearlyFour: [],//第四步年数组
      nowFouryear: '',
      yearlySix: [],//第六步年数组
      nowSixyear: '',//第六步年数组
    }
  },
  computed: {
    ...mapGetters(["globalCountrySetting", "bottomModeMapView"]),
  },
  created() {
      if(this.$route.path =='/'){
          this.nameOne='oneChart';
          this.nameTwo='twoChart';
          this.nameFour='fourChart';
          this.nameSix="sixChart";
          this.nameFive='fiveChart';
          this.nameThree='threeChart';
      }else{
         this.nameOne='oneChartAS';
         this.nameTwo='twoChartAS';
         this.nameFour='fourChartAS'
         this.nameSix="sixChartAS";
         this.nameFive='fiveChartAS';
         this.nameThree='threeChartAS';
      }
    this.getCountrydetail();
  },
  mounted() {
    this.initFomal();
    this.getIconSetting();
    this.getAreaAcount()
  },
  methods: {
    ...mapMutations(["changeCountry", "OPENWindowBase", "changeMapSettingData"]),
    //获取地图国家json
    getCountrydetail() {
      $.getJSON("../../../public/surroundings.json").then((res) => {
        console.log(res);
        // this.cities = JSON.parse(res).rows;//打包
        // console.log(this.cities);
        this.cities = res.rows;
        this.changeCountry(this.cities)
        this.nowCountry = {
          id: this.cities[0].id,
          value: this.cities[0].name,
          iconName: this.cities[0].iconName,
        }; //当前国家
        this.changeMapSettingData(this.nowCountry);
        this.$refs.mapCom.drawMap(this.nowCountry);
        this.$refs['mapCom'].transitionCentral()
      })
    },
    //获取数据总量
    getAreaAcount() {
      this.$store.dispatch("ajaxApi", {
        // this.$store.dispatch("ajax", {
        url: `/services/app-zonghe/api/example/cypher/nodes/things/_count`,
        method: "get",
        succeed: (res) => {
          this.areaAcount.dot = res
        },
        errored: (err) => {
          console.log(err);
        }
      });
      this.$store.dispatch("ajaxApi", {
        // this.$store.dispatch("ajax", {
        url: `/services/app-zonghe/api/example/cypher/relationships/things/_count`,
        method: "get",
        succeed: (res) => {
          this.areaAcount.relate = res
        },
        errored: (err) => {
          console.log(err);
        }
      });
    },
    //改变图表年数组
    changeNum(type, data) {
      if (type == 'two') {
        this.yearlyTwo = data.arr;
        this.nowOneyear = data.value;
      } else if (type == 'three') {
            this.yearlyThree = data.arr;
            this.nowThreeyear = data.value;
      } else if (type == 'five') {
            this.yearlyFive = data.arr;
            this.nowFiveyear = data.value;
      } else if (type == 'four') {
             this.yearlyFour = data.arr;
            this.nowFouryear = data.value;
      } else if (type == 'six') {
            this.yearlySix = data.arr;
            this.nowSixyear = data.value;
      }
    },
    //切换数据
    changeYear(type,val) {
      if (type == 'two') {
                this.$refs.twoCharts.changeNum(val)
      } else if (type == 'three') {
         this.$refs.threeCharts.changeNum(val)
      } else if (type == 'five') {
           this.$refs.fiveCharts.changeNum(val)
      } else if (type == 'four') {
           this.$refs.fourCharts.changeNum(val)
      } else if (type == 'six') {
           this.$refs.sixCharts.changeNum(val)
      }
    },
    //初始化
    initFomal() {
      var sfzcllH = $('.sfzcll_box').height()
      var sfzcllHtwo = sfzcllH - 2
      $('.sfzcll_box').css('line-height', sfzcllH + 'px')
      $('.sfzcll_smallBk>div').css('line-height', sfzcllHtwo + 'px')
    },
    //获取图标配置
    getIconSetting() {
      // eslint-disable-next-line no-underscore-dangle
      let _this = this;
      $.getJSON("../../../public/iconPopInfo/list.json").then((res) => {
        console.log(res);
        // let arr = JSON.parse(res).list;
        let arr = res.list;
        let num = 0;
        for (let t of arr) {
          for (let j in t.children) {
            num++;
            if (j === t.children.length - 1) {
              _this.iconCount = num;
            }
          }
        }
      });
    },
    /* 中间操作 start */
    //打开基地管理弹框
    showBasePopUp() {
      let isShow = this.bottomModeMapView.IsShow;
      this.OPENWindowBase({
        isOpen: !isShow,
        type: 'base'
      });
    },
    currentCountry() {
      // console.log(this.globalCountrySetting);
      this.isOpen = !this.isOpen;
    },
    //更改国家
    bindchangeCountry(val) {
      let index = val.slice(1, val.length);
      // console.log(index);
      // console.log(this.cities[index - 1])
      this.nowCountry.value = this.cities[index - 1].id;
      this.nowCountry.value = this.cities[index - 1].name;
      this.nowCountry.iconName = this.cities[index - 1].iconName;
      this.changeMapSettingData(this.nowCountry);
      this.$refs['mapCom'].transitionCentral()
    },
    //标记点
    chooseMap(node, relationlist) {
      console.log(node, relationlist);
      this.$refs['mapCom'].chooseMap(node, relationlist);
    },
    //json 文件加载
    loadingFile(node, isDel) {
      this.$refs['mapCom'].loadingDot(node, isDel);
    },
    //模型选择展示节点
    changeModel(node) {
      this.$refs['mapCom'].markPoint(node);
    },
    /* 中间操作 end */
    /* 图标操作 start */
    showIconPopUp() {
      let IsIconShow = this.bottomModeMapView.IsIconShow;
      this.OPENWindowBase({
        isOpen: !IsIconShow,
        type: 'icon'
      });
    },
    screen(val) {
      // let element = document.documentElement;//设置后就是我们平时的整个页面全屏效果
      let element = document.getElementById('mapCom');//设置后就是   id==con_lf_top_div 的容器全屏
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen();
        }
      }
      this.fullscreen = val;
    }
    /* 图标操作 end */
  }
}
</script>

<style lang="less">
@import url("./home.less");

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

.el-tabs__item {
  color: #fff;
}
#leaflet-control-sreen {
  position: static !important;
  cursor: pointer;
  z-index: 2000;
}
#leaflet-control-layer {
  position: static !important;
  cursor: pointer;
  z-index: 2000;
}
</style>